<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html lang="en">
<head>
	<base href="<%=basePath%>">
	<meta name="viewport">
	<title>登陆界面</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<script src="jquery-3.2.1/jquery-3.2.1.min.js"></script><!-- 《《《《《《《《《先引用jquery.js再引用bootstrap.js》》》》》》》》》 -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<style>
		.test{
			height:300px;
			width:400px;
			background: red;
		}
		
		.size{
			font-size:50px;
			color:purple;
		}
		
		@media screen and (max-width:900px) and (min-width:300px){
			.test{
				width: 100%;
				height:100px;
				background: blue;
			}
		}
	</style>
</head>

<body>
	<!--<div class="test"></div> 栅格布局 -->
	<div class="glyphicon glyphicon-phone size"></div>
	<form action="<%=path%>/LoginServlet" class="form-inline"><!-- 水平排列 -->
	<div class="form-group has-warning">
		<label for="" class="control-label">账号：</label><!-- 可控制标签 -->
		<input type="text" class="form-control input-sm" placeholder="请输入账号" name="userId">
	</div>
	<div>
		<label for="" class="control-label">密码：</label><!-- 可控制标签 -->
		<input type="password" class="form-control input-sm" placeholder="请输入密码" name="password">
	</div>
	<div>
		<label class="conrtol-label conrtol-label-danger">管理员</label>
		<input type="radio" name="roleType" class="radio" value="user">
		<label class="conrtol-label conrtol-label-warning">教师</label>
		<input type="radio" name="roleType" class="radio" value="teacher">
	</div>
	<div>
		<button class="btn btn-success input-sm">
			<span class="glyphicon glyphicon-star"></span><!-- 引用图标 -->
			登陆
		</button>
		<button class="btn btn-error" disabled="disabled">登陆</button><!-- 禁用按钮 -->
		<button class="btn btn-info btn-block">登陆</button><!-- 按钮全屏化 -->
	</div>

	<!-- 控件 -->
	<div class="input-group">
		<span class="input-group-addon">@</span>
		<input type="text" class="form-control">
	</div>

		<div class="dropdown"><!-- 下拉列表 --> 
		<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><!-- 关联下拉列表并绑定下拉列表 -->
			按钮
			<span class="caret"></span><!-- 下拉角标 -->
		</button>
		<ul class="dropdown-menu">
			<li><a href="http://www.imooc.com">慕课网</a></li>
			<li><a href="http://www.imooc.com">慕课网</a></li>
			<li><a href="http://www.imooc.com">慕课网</a></li>
			<li><a href="http://www.imooc.com">慕课网</a></li>
		</ul>
	</div>
	
	<!-- 导航栏 -->
	<ul class="nav nav-tabs">
		<li class="active"><a href="http://www.imooc.com">慕课网</a><!-- active标识一下下 -->
		<li class="active"><a href="http://www.imooc.com">慕课网</a>
		<li><a href="http://www.imooc.com">慕课网</a>
	</ul>
	
	<ul class="nav nav-pills">
		<li class="active"><a href="http://www.imooc.com">慕课网</a>
		<li><a href="http://www.imooc.com">慕课网</a>
		<li><a href="http://www.imooc.com">慕课网</a>
	</ul>
	
	<ul class="nav nav-stacked">
		<li><a href="http://www.imooc.com">慕课网</a>
		<li><a href="http://www.imooc.com">慕课网</a>
		<li><a href="http://www.imooc.com">慕课网</a>
	</ul>
	
	<!-- 进度条 -->
	<div class="progress">
		<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:60%;">60%
		</div>
	</div>
	
	<!-- 列表 -->
	<ul class="list-group">
		<li class="list-group-item active">
			badge好像表示此行的消息条数
			<span class="badge">2</span>
		</li>
		<li class="list-group-item list-group-item-success">
			你有通知~
			<span class="badge">99+</span>
		</li>
		<li class="list-group-item list-group-item-danger">
			你有通知~
			<span class="badge">99+</span>
		</li>
	</ul>
	
	<!-- 面板 -->
	<div class="panel panel-success">
		<div class="panel-heading">
			弹出层！
		</div>
		<div class="panel-body">
			这是面板的具体内容
		</div>
		<div class="panel-footer">
			脚注
		</div>
	</div>
	
	<!-- 按钮层 -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		弹窗
	</button>
	
	<!-- Modal弹窗窗口 -->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span>&times;</span><span class="sr-only">关闭弹窗</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">标题</h4>
				</div>
				<div class="modal-body">
					慕课网
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div></form>
</body>